<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
  </head>

  <body>
  <div>
    
    <div ng-include="headerInclude"></div>   
    <div ng-controller="Apiman.ConsumerApiController" class="page container" data-field="page" ng-cloak="" ng-show="pageState == 'loaded'">
      <div class="row">
        <div class="col-md-12">
          <ol class="breadcrumb" data-field="breadcrumb">
            <li><a id="bc-home" href="{{ pluginName }}/"><i class="fa fa-home fa-fw"></i><span apiman-i18n-key="home">Home</span></a></li>
            <li><a id="bc-orgs" href="{{ pluginName }}/browse/orgs"><i class="fa fa-search fa-fw"></i><span apiman-i18n-key="organizations">Organizations</span></a></li>
            <li><a id="bc-org" href="{{ pluginName }}/browse/orgs/{{params.org}}"><i class="fa fa-shield fa-fw"></i><span>{{ org.name }}</span></a></li>
            <li class="active"><i class="fa fa-puzzle-piece fa-fw"></i><span>{{ api.name }}</span></li>
          </ol>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <h1 class="consumer-top-header" apiman-i18n-key="api-details">API Details</h1>
        </div>
        <div class="col-md-12">
          <div class="vspacer-10" />
        </div>
      </div>
      <div class="row">

        <!-- Left column -->
        <div class="col-md-4 browse-items">
          <div class="item" style="width: 100%; margin-bottom: 20px;" data-field="apiCard">
            <div class="title">
              <i class="fa fa-puzzle-piece icon"></i><a href="{{ pluginName }}/browse/orgs/{{ api.organization.id }}" data-field="titleOrg">{{ api.organization.name }}</a>
              <span apiman-i18n-skip> / </span>
              <span class="emphasis">{{ api.name }}</span>
            </div>
            <div class="description" style="margin-bottom: 10px;">{{ api.description }}</div>
            <span class="apiman-form-label" apiman-i18n-key="choose-version">Choose Version:</span>
            <div class="btn-group apiman-entity-action" ng-show="versions.length > 0">
              <select id="version" apiman-select-picker="" ng-model="selectedApiVersion" ng-change="setVersion( selectedApiVersion )"
                title="" class="selectpicker" data-live-search="false" apiman-i18n-skip
                data-field="versionSelector" data-ng-options="version as version.version for version in versions">
              </select>
            </div>
            <div apiman-i18n-key="no-published-api-versions-found" class="alert alert-warning no-icon" ng-hide="versions.length > 0">
              No versions of this API have been published.  You will not be able to
              consume this API until it has been published by its owner!
            </div>
            <div ng-show="version.definitionType == 'SwaggerJSON' && hasSwagger">
              <div class="vspacer-10" />
              <a href="{{ pluginName }}/browse/orgs/{{params.org}}/{{params.api}}/{{params.version}}/def">
                <i class="fa fa-fw fa-sitemap"></i>
                <span apiman-i18n-key="view-api-def">View API Definition</span>
              </a>
            </div>
          </div>
        </div>
        
        <!-- Right column -->
        <div class="col-md-8">
          <div class="consumer-section">
          
            <div ng-show="version.status != 'Published'">
              <p class="apiman-no-entities-description" apiman-i18n-key="version-not-published">This version of the selected API is not yet published.  You cannot create a contract until the API provider published this version of the API!</p>
            </div>
          
            <div id="managed-endpoint-wrap" ng-show="version.publicAPI && version.status == 'Published'">
              <h3 apiman-i18n-key="public-endpoint" class="consumer-header">Public Endpoint</h3>
              <p class="apiman-label-faded" apiman-i18n-key="consumer-api.public-api-warning">
                Because this is a Public API, it is possible to invoke it directly, without
                the need for an API Contract with a Client App.  To directly invoke the
                API, send requests to the API Gateway endpoint below.
              </p>
              <div class="input-group" style="width: 80%; margin: 25px 0 45px 0;">
                <input readonly
                       type="text"
                       class="apiman-form-control form-control readonly apiman-readonly"
                       value="{{ publicEndpoint.managedEndpoint }}"
                       style="background-color: white; color: black">
                <span class="input-group-btn">
                  <button clipboard
                          text="publicEndpoint.managedEndpoint"
                          class="btn btn-default clipboard"
                          type="button"
                          on-copied="copySuccess()"
                          on-error="copyFail(err)"
                          ng-mouseleave="tooltipReset()"
                          ng-click="tooltipChange()"
                          style="padding: 2px 6px 4px;"
                          uib-tooltip="{{ tooltipTxt }}">
                    <span class="glyphicon glyphicon-copy"></span>
                  </button>
                </span>
              </div>
            </div>

            <div id="available-plans-wrap" ng-show="version.status == 'Published'">
              <h3 apiman-i18n-key="available-plans" class="consumer-header">Available Plans</h3>
              <div class="apiman-plans consumer-section" data-field="plans">

                <div class="apiman-no-content" ng-hide="plans.length > 0">
                  <p class="apiman-no-entities-description" apiman-i18n-key="no-plans-offered-by-api">No plans are currently offered by this API.</p>
                </div>

                <div class="container-fluid apiman-summaryrow" ng-repeat="plan in plans">
                  <div class="row">
                    <div class="col-md-10 col-no-padding">
                      <i class="fa fa-fw fa-bar-chart-o icon"></i>
                      <span class="title"><a data-toggle="collapse" ng-click="getPolicyChain(plan)" href="#collapse{{ $index }}">{{ plan.planName }}</a></span>
                      <div class="description">
                        {{ plan.planDescription }}
                      </div>
                    </div>
                    <div class="col-md-2 col-no-padding">
                      <span class="actions"><a apiman-i18n-key="create-contract" href="{{ pluginName }}/new-contract?api={{ params.api }}&amp;apiorg={{ params.org }}&amp;apiv={{ params.version }}&amp;planid={{ plan.planId }}" class="btn btn-default">Create Contract</a></span>
                    </div>
                  </div>
                  <!-- Sub-section - policy chain -->
                  <div class="panel-collapse collapse apiman-policy-chain" id="collapse{{ $index }}" style="margin-top: 15px" >
                  
                    <div ng-hide="chains[plan.planId]">
                      <div class="spinner spinner-sm pull-left"></div>
                      <span apiman-i18n-key="loading-policy-chain" style="margin-left: 5px">Loading policy chain...</span>
                    </div>
                  
                    <div class="apiman-policies" ng-show="chains[plan.planId]">
                      <div class="container-fluid apiman-summaryrow" ng-repeat="policy in chains[plan.planId]">
                        <div class="row">
                          <div class="col-md-1 col-no-padding">
                            <i class="fa fa-{{ policy.icon }} fa-fw apiman-policy-icon"></i>
                          </div>
                          <div class="col-md-11 col-no-padding">
                            <div class="">
                              <span class="title apiman-label-faded">{{ policy.name }}</span>
                            </div>
                            <div class="description apiman-label-faded">{{ policy.description }}</div>
                          </div>
                        </div>
                        <div>
                          <hr>
                        </div>
                      </div>
                    </div> <!-- /policy chain -->
                    
                  </div>
                  <hr />
                </div>
              
              </div>
            </div>
          </div>
        </div> <!-- /right-column -->
        
      </div>
    </div> <!-- /container -->
  </div>
  </body>
</html>
